<template>
  <div class="house_main">
    <head-top head-title="房屋认证" goBack="true"></head-top>
    <div class='head'>
      <span>选择房屋</span>
    </div>
    <div class="house_type">
      <mt-cell title="小区:" :value="village" is-link @click.native="choseVillage()"></mt-cell>
      <mt-cell title="苑:" :value="yuanValue" is-link v-show="status === 2" @click.native="choseYuan()"></mt-cell>
      <mt-cell title="楼幢:" :value="buildValue" is-link @click.native="choseBuild()"></mt-cell>
      <mt-cell title="单元:" :value="unitValue" is-link @click.native="choseUnit()"></mt-cell>
      <mt-cell title="房号:" :value="roomValue" is-link @click.native="choseRoom()"></mt-cell>
    </div>
    <div class="phone_box" v-show="phoneBoxShow">
      <ul class="phone_items">
        <li v-for="(item,index) in assort" class="item" @click="selectActive(item)">
          <span class="title" :class="{'active':item.active,'unactive':!item.active}">
          {{item.omitPhone}}
          </span>
        </li>
      </ul>
      <div class="li_li border-bottom teshu">
        <span>验 证 码&nbsp;：</span>
        <input class="code_input" type="tel" placeholder="请输入验证码" v-model.trim="numCode" maxlength="4">
        <div class="btn">
          <mt-button @click="getCode" type="primary" :disabled="time ==0 || time==60 ? false : true ">
            <span v-show="sendMsgDisabled">{{time + 's后获取'}}</span>
            <span v-show="!sendMsgDisabled">{{msg}}</span>
          </mt-button>
        </div>
      </div>
    </div>
    <div class="addBtn">
      <button @click="saveHouse">
        <span>确认提交</span>
      </button>
    </div>
    <div class="changeBtn">
      <button @click="$router.push('/my/Ident')">
        <span>业主变更</span>
      </button>
    </div>
    <!--小区-->
    <mt-popup
      v-model="villageShow"
      class="villageHeight">
      <div class="village">
        <p class="p">请选择小区</p>
        <span class="back" @click="hidden">&lt;</span>
        <div class="plots-wrapper">
          <div class="search">
            <div class="search-wrapper">
              <input type="text" placeholder="请输入小区的名称" v-model="keyword" @keyup.enter="search" @input="search">
              <span class="search-icon" @click="search"></span>
            </div>
          </div>
        </div>
      </div>
      <mt-index-list>
        <mt-index-section :index="index" v-for="(item,index) in data" :key="index">
          <div v-for="(list,index) in item" @click="goVillage(list)">
            <mt-cell :title="list.title"></mt-cell>
          </div>
        </mt-index-section>
      </mt-index-list>
    </mt-popup>
    <!-- 苑 -->
    <mt-popup
      v-model="yuanShow"
      popup-transition="popup-fade">
      <div class="village">
        <p class="p">请选择苑</p>
        <div class="village_list">
          <ul>
            <li v-for="(item,index) in y" :key="index" @click="goYuan(item)">
              <span class="border-bottom">{{item.name}}</span>
            </li>
          </ul>
        </div>
      </div>
    </mt-popup>
    <!--幢-->
    <mt-popup
      v-model="buildShow"
      popup-transition="popup-fade">
      <div class="village">
        <p class="p">请选择幢</p>
        <div class="village_list">
          <ul>
            <li v-for="(item,index) in z" :key="index" @click="goBuild(item)">
              <span class="border-bottom" v-if="item.pid === yid">{{item.name}}幢</span>
              <span class="border-bottom" v-show="status === 1">{{item.name}}幢</span>
            </li>
          </ul>
        </div>
      </div>
    </mt-popup>
    <!--单元-->
    <mt-popup
      v-model="unitShow"
      popup-transition="popup-fade">
      <div class="village">
        <p class="p">请选择单元</p>
        <div class="village_list">
          <ul>
            <li v-for="(item,index) in d" :key="index" @click="goUnit(item)">
              <span class="border-bottom" v-show="item.pid === zid">{{item.name}}单元</span>
            </li>
          </ul>
        </div>
      </div>
    </mt-popup>
    <!--房号-->
    <mt-popup
      v-model="roomShow"
      popup-transition="popup-fade">
      <div class="village">
        <p class="p">请选择房号</p>
        <div class="village_list">
          <ul>
            <li v-for="(item,index) in f" :key="index" @click="goRoom(item)">
              <span class="border-bottom" v-show="item.pid === did">{{item.name}}</span>
            </li>
          </ul>
        </div>
      </div>
    </mt-popup>
  </div>
</template>
<style lang="scss">
  @import "../../common/sass/mixin.scss";

  .plots-wrapper {
    background: #fff;
    .search {
      text-align: center;
      height: 44px;
      line-height: 44px;
      .search-wrapper {
        position: relative;
        display: inline-block;
        height: 30px;
        line-height: 30px;
        width: 92%;
        margin: 0 10px;
        border-radius: 4px;
        background-color: #e6e6e6;
        input {
          width: 118px;
          font-size: 14px;
          outline: none;
          border: none;
          background-color: #e6e6e6;
          &::-ms-input-placeholder {
            text-align: center;
          }
          &::-webkit-input-placeholder {
            text-align: center;
          }
        }
        .search-icon {
          position: absolute;
          top: 6px;
          /*right: 10px;*/
          display: inline-block;
          width: 17px;
          height: 17px;
          background-size: 17px 17px;
          background-repeat: no-repeat;
          @include bgimg('../home/images/search');
        }

      }
    }
    .now-plot {
      padding-left: 10px;
      font-size: 15px;
      height: 40px;
      line-height: 40px;
      background-color: #D9D9D9;
    }
    ul {
      padding: 0 10px;
      .line {
        height: 44px;
        line-height: 44px;
        border-bottom: 1px solid rgb(217, 217, 217);
        font-size: 15px;
        &:last-child {
          border-bottom: 1px solid transparent;
        }
      }
    }
  }

  .house_main {
    width: 100%;
    padding-top: 40px;
    .mint-cell-wrapper {
      background-size: 100% 1px;
    }
    .head {
      background: #f4f4f4;
      span {
        font-size: 15px;
        line-height: 44px;
        margin-left: 10px;
      }
    }
    /*电话号码盒子*/
    .phone_box {
      .phone_items {
        padding-bottom: 20px;
        display: inline;
        justify-content: space-between;
        .item {
          width: 33.33%;
          display: inline-block;
          height: 40px;
          line-height: 45px;
          text-align: center;
          margin-top: 5px;
          .title {
            border: 1px solid #d9d9d9;
            padding: 10px 11px;
            border-radius: 3px;
            color: #292929;
          }
          .active {
            border: 1px solid #0078de;
            padding: 10px 11px;
            border-radius: 3px;
            color: #0b7ad9;
          }
        }
      }
      .li_li {
        font-size: 1.3em;
        height: 48px;
        line-height: 48px;
        position: relative;
        width: 100%;
        span {
          padding-left: 10px;
          &.span-color {
            font-size: 1.3rem;
            color: #888;
          }
        }
        input {
          width: 42%;
          border: none;
          outline: none;
          font-size: 1.2rem;
          color: #888;
          &.code_input {
            width: 30%;
          }
        }
        &.teshu {
          span {
            flex: 0 0 80px;
          }
          .code_input {
            /*flex: 1;*/
            padding: 0;
            height: 44px;
            line-height: 47px;
          }
          .btn {
            text-align: center;
            float: right;
            padding-right: 5px;
            .mint-button--primary {
              color: #0078de;
              border-radius: 30px;
              height: 30px;
              font-size: 14px;
              background: #f2f2f2;
            }
          }
        }
      }
    }
    .addBtn {
      width: 100%;
      text-align: center;
      margin-top: 30px;
      button {
        width: 90%;
        background: #0078de;
        outline: none;
        span {
          line-height: 44px;
          font-size: 15px;
          color: #fff;
        }
      }
    }
    .changeBtn {
      width: 100%;
      text-align: center;
      margin-top: 30px;
      button {
        width: 90%;
        background: #00c96c;
        outline: none;
        span {
          line-height: 44px;
          font-size: 15px;
          color: #fff;
        }
      }
    }

    /*弹框样式*/
    .mint-popup {
      width: 85%;
      height: 200px;
      border-radius: 5px;
      .village {
        .back {
          font-size: 23px;
          position: absolute;
          top: 12px;
          left: 10px;
        }
        .p {
          font-size: 15px;
          text-align: center;
          line-height: 44px;
          border-bottom: 1px solid #d7d7d7;
        }
        .village_list {
          height: 150px;
          overflow: auto;
          -webkit-overflow-scrolling: touch;
          ul {
            li {
              width: 100%;
              text-align: center;
              span {
                display: inline-block;
                width: 100%;
                // border-bottom: 1px solid #f2f2f2;
                font-size: 16px;
                color: #1b1b1b;
                line-height: 36px;
              }
            }
          }
        }
      }
    }
    .villageHeight {
      width: 100%;
      height: 100%;
      border-radius: 0;
      .mint-indexlist {
        height: 78%;
      }
      .mint-indexlist-content {
        height: 100% !important;
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
      }
    }
  }
</style>
<script>
  import headTop from '../header/Header.vue'
  import {Toast} from 'mint-ui'
  import {loadTitle, saveTitle, saveVillageId, loadVillageId} from '../../common/js/cache.js'
  import {getVillageLoad, searchKeyword} from '../../api/cityVillage.js'
  import {getHouseData, saveHouseData, getHousePhone, HouseCode} from '../../api/my.js'

  export default {
    name: 'HouseConfirm',
    data() {
      return {
        assort: [], // 需要变更的电话号码
        omitPhone: [], // *号的电话号码
        getPhone: '',
        msg: '获取验证码',
        time: 60, // 发送验证码倒计时
        sendMsgDisabled: false,   // 按钮上的显示文本（false:显示为时间跳动的文本  true:显示为发送验证码）
        numCode: '', // 验证码
        phoneBoxShow: false,
        data: {},
        villageShow: false,
        buildShow: false,
        unitShow: false,
        roomShow: false,
        yuanShow: false,
        y: [],
        z: [],
        d: [],
        f: [],
        yid: -1,
        zid: -1,
        did: -1,
        fid: -1,
        yuanValue: '',
        buildValue: '',
        unitValue: '',
        roomValue: '',
        value: '',
        village: loadTitle(),
        villageId: loadVillageId(),
        keyword: '',
        status: 1
      }
    },
    components: {
      headTop
    },
    created() {
      // this._getVillage()
      // 小区  苑  幢  单元  房号根据首页显示的小区的id显示
      this._getHouseData(this.villageId)
    },
    methods: {
      // 点击返回
      hidden() {
        this.villageShow = false
      },
      // 小区列点击事件
      choseVillage() {
        this.villageShow = true
        this.keyword = ''
        this._getVillage()
      },
      // 苑列点击事件
      choseYuan() {
        this.yuanShow = true
      },
      // 楼幢列点击事件
      choseBuild() {
        if (this.village === '') {
          Toast({
            message: '请选择小区',
            position: 'middle',
            duration: 2000
          })
          return
        }
        if (this.status === 2 && this.yuanValue === '') {
          Toast({
            message: '请选择苑',
            position: 'middle',
            duration: 2000
          })
          return
        }
        this.buildShow = true    // 幢
      },
      // 单元列点击事件
      choseUnit() {
        if (this.zid === -1) {
          Toast({
            message: '请选择幢',
            position: 'middle',
            duration: 2000
          })
          return
        }
        this.unitShow = true
      },
      // 房号列点击事件
      choseRoom() {
        if (this.did === -1) {
          Toast({
            message: '请选择单元',
            position: 'middle',
            duration: 2000
          })
          return
        }
        if (this.did === -1) {
          Toast({
            message: '请选择单元',
            position: 'middle',
            duration: 2000
          })
          return
        }
        this.roomShow = true
      },
      // 小区选择
      goVillage(item) {
        this.village = item.title
        this.villageShow = false
        this.villageId = item.id
        this.keyword = ''
        saveVillageId(item.id)
        saveTitle(item.title)
        // 小区  苑  幢  单元  房号根据点击选择的小区显示
        this._getHouseData(this.villageId)
        if (this.unitValue || this.roomValue || this.buildValue || this.yuanValue) {
          this.buildValue = ''
          this.unitValue = ''
          this.roomValue = ''
          this.yuanValue = ''
        }
      },
      // 苑选择
      goYuan(item) {
        this.yuanValue = item.name
        if (this.unitValue || this.roomValue || this.buildValue) {
          this.buildValue = ''
          this.unitValue = ''
          this.roomValue = ''
        }
        this.yid = item.id
        this.yuanShow = false
      },
      // 幢选择
      goBuild(item) {
        this.buildValue = item.name + '幢'
        if (this.unitValue || this.roomValue) {
          this.unitValue = ''
          this.roomValue = ''
        }
        this.zid = item.id
        this.buildShow = false
      },
      // 单元选择
      goUnit(item) {
        this.unitValue = item.name + '单元'
        if (this.roomValue) {
          this.roomValue = ''
        }
        this.did = item.id
        this.unitShow = false
      },
      // 房号选择
      goRoom(item) {
        this.roomValue = item.name
        this.fid = item.id
        this.roomShow = false
        // 房号选择完成后显示电话号码匹配及发送验证码
        this.phoneBoxShow = true
        this._getHousePhone()
      },
      // 获取小区列表
      _getVillage() {
        getVillageLoad().then(res => {
          if (res.code === 200) {
            this.data = res.data
          }
        })
      },
      search() {
        searchKeyword(this.keyword).then(res => {
          if (res.code === 200) {
            this.data = res.data
          }
        })
      },
      // 房屋认证  小区  苑  幢  单元  房号
      _getHouseData(id) {
        getHouseData(id).then(res => {
          this.y = res.data.yuan
          this.z = res.data.zhuang
          this.d = res.data.danyuan
          this.f = res.data.fanghao
          this.status = res.data.status
        })
      },
      // 电话号码获取
      _getHousePhone() {
        getHousePhone(this.fid).then(res => {
          // console.log(res)
          if (res.code === 200) {
            var assortChange = res.data
            for (var i = 0; i < assortChange.length; i++) {
              var reg = /^(\d{3})\d{4}(\d{4})$/
              var tel = assortChange[i].phone.replace(reg, '$1****$2')
              // console.log(tel)
              assortChange[i]['omitPhone'] = tel
              this.assort = assortChange
            }
          } else if (res.code === 400) {
            Toast({
              message: res.error,
              position: 'middle',
              duration: 4000
            })
            this.phoneBoxShow = false
            return
          }
        })
      },
      // 类别选择
      selectActive(item) {
        this.getPhone = item.phone
        // console.log(this.getPhone)
        setTimeout(() => {
          this.assort.forEach(items => {
            this.$set(items, 'active', false)
          })
          this.$set(item, 'active', true)
        }, 20)
      },
      // 验证码发送
      getCode() {
        if (this.getPhone.length !== 11 && (typeof this.getPhone) !== Number) {
          Toast({
            message: '手机号码格式不对',
            position: 'middle',
            duration: 1000
          })
          return
        } else {
          HouseCode(this.getPhone).then(res => {
            // console.log(res)
            if (res.code === 400) {
              Toast({
                message: res.error,
                position: 'middle',
                duration: 1000
              })
              window.clearInterval(interval)
            }
          })
          let me = this
          me.sendMsgDisabled = true  // 点击时变成true 那么就是显示多少秒后获取
          let interval = window.setInterval(function () {
            if ((me.time--) <= 0) {
              me.time = 60
              me.sendMsgDisabled = false
              window.clearInterval(interval)
            }
            me.msg = '重新获取'
          }, 1000)
        }
      },
      saveHouse() {
        if (!this.village || !this.buildValue || !this.unitValue || !this.roomValue || !this.numCode) {
          Toast({
            message: '请填写完整资料',
            position: 'middle',
            duration: 2000
          })
          return
        }
        saveHouseData(this.fid, this.villageId, this.getPhone, this.numCode).then(res => {
          if (res.code === 400) {
            Toast({
              message: res.error,
              position: 'middle',
              duration: 3000
            })
            // this.$router.back()
          }
          if (res.code === 200) {
            Toast({
              message: '添加房屋成功',
              position: 'middle',
              duration: 2000
            })
            this.$router.back()
          }
        })
      }
    }
  }
</script>
